import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './modal.scss'
import {Motion, spring, presets} from 'react-motion';

const modalOpenClass = 'modal-open';
const toggleBodyClass = isOpen => {
  const body = document.body;
  if (isOpen) {
    body.classList.add(modalOpenClass);
  } else {
    body.classList.remove(modalOpenClass);
  }
}

export default class Modal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: props.isOpen || false
    };
    toggleBodyClass(props.isOpen);
  }
  componentWillReceiveProps (nextProps) {
    if ('isOpen' in nextProps) {
      this.setState({
        isOpen: nextProps.isOpen
      });
      toggleBodyClass(nextProps.isOpen);
    }
  }
  close = () => {
    // console.log('close');
    this.setState({
      isOpen: false
    });
    toggleBodyClass(false);
    this.props.onCancel();
  }
  onConfirmClick = (e) => {
    // console.log('confirm click');
    this.props.onConfirm();
    this.close();
    e.stopPropagation();
  }
  onCancelClick = (e) => {
    // console.log('cancel click');
    this.props.onCancel();
    this.close();
    e.stopPropagation();
  }
  onRest = (fn) => {
    const {isOpen} = this.state;
    if (!isOpen) {
      this.props.onClose();
    }
    this.props.onRest();
    fn && fn();
  }
  render () {
    const {isOpen} = this.state;
    // console.log('update', this.state.isOpen);
    const {title, children, className, confirmText, cancelText, maskClosable, type} = this.props;
    return (
      <Motion defaultStyle={{opacity: .8, scale: .8}} style={{
        opacity: spring(isOpen ? 1 : 0),
        scale: spring(isOpen ? 1 : 0)
      }} onRest={this.onRest}>
        {
          ({opacity, scale}) => (
            <div className={`modal-container ${className}`} onClick={maskClosable ? this.close : () => {}} style={{opacity}}>
              <div className="modal-body" onClick={(e) => e.stopPropagation()} style={{opacity, transform: `translate(-50%, -50%) scale(${scale})`}}>
                <div className={`modal-title ${type}`}>{title}</div>
                <div className="modal-content">{children}</div>
                <div className="modal-footer">
                  <button className="confirm-btn" onClick={this.onConfirmClick}>{confirmText}</button>
                  <button className="cancel-btn" onClick={this.onCancelClick}>{cancelText}</button>
                </div>
              </div>
            </div>
          )
        }
      </Motion>
    )
  }
}

// 开关状态isOpen
// Modal标题title
// Modal主体内容children
// Modal类名className
// 点击黑色区域是否可以关闭maskClosable
// 关闭按钮文案 cancelText
// 确认按钮文案 okText
// 关闭按钮回调函数 onCancel
// 确认按钮回调函数 onOk
Modal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  title: PropTypes.string.isRequired,
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
  className: PropTypes.string,
  maskClosable: PropTypes.bool,
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
  confirmText: PropTypes.string,
  cancelText: PropTypes.string,
  type: PropTypes.oneOf(['alert', 'confirm', 'error', 'success'])
};
Modal.defaultProps = {
  className: '',
  maskClosable: true,
  onCancel: () => {},
  onConfirm: () => {},
  confirmText: '确定',
  cancelText: '取消',
  type: 'alert'
};